interface Props {
  title: string,
  content: string
}

// 扩展原生Event接口
interface CustomEvent extends Event {
  params?: {
    title: string;
    content: string;
  };
}

export default function Communication() {
  return (
    <div>
      <h1>组件通信</h1>
      <div>我是父组件</div>
      <hr />
      <Child title={"标题1"} content={"内容1"} />
      <Child title={"标题2"} content={"内容2"} />
      {/* <Child>
        <div slot="title">我是标题1</div>
        <div slot="content">我是内容1</div>
      </Child> */}
      <Child2></Child2>
    </div>
  )
}

const Child = (props: Props) => {

  const e = new Event("onChild") as CustomEvent
  const clickTap = () => {
    e.params = {
      title: '传递标题',
      content: '传递内容'
    }
    window.dispatchEvent(e)
  }

  return (
    <>
      <div>我是子组件</div>
      <div>{props.title}</div>
      <div>{props.content}</div>
      {/* <slot name="title" />
      <slot name="content" /> */}
      <button onClick={clickTap}>点击触发事件</button>
    </>
  )
}

const Child2 = () => {


  window.addEventListener('onChild',(e) => {
    console.log('子组件2收到事件')
    console.log((e as CustomEvent).params);
    
  })


  return (
    <>
      <div>我是子组件2</div>

    </>
  )
}

